<template>
    <div>
        <jsscom-heard />
        <div class="cons">
            <div class="con-2">
                <img src="../../../assets/news/9.png" alt />
            </div>
            <div class="con-3">
                <div class="pu-con">
                    <div class="con-tilte">
                        <h1>{{ videoData.title }}</h1>
                    </div>
                    <div class="con-1">
                        <p>发布日期：{{ videoData.createDate | pattime }}</p>
                        <p></p>
                        <p></p>
                    </div>
                    <div class="con42" v-if="videoData.coverVideoUrl">
                        <video-player
                            class="video-player vjs-custom-skin"
                            ref="videoPlayer"
                            :playsinline="true"
                            :options="playerOptions"
                        ></video-player>
                        <!-- <video :src="prefixUrl+videoData.coverVideoUrl" controls></video> -->
                    </div>
                    <div class="con42" v-else>
                        <div v-html="videoData.contentBack"></div>
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import jsscomHeard from "@/components/jsscom-heard";
import comFoot from "@/components/com-foot";
import moment from "moment";
import Video from "./video";

export default {
    components: {
        Video,
        jsscomHeard,
        comFoot,
    },
    filters: {
        pattime(value) {
            const val = moment(value).format("YYYY年MM月DD日");
            return val.slice(0, 11);
        },
    },
    data() {
        return {
            prefixUrl: "",
            videoData: {},
            playerOptions: {},
        };
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        const id = this.$route.query.id;

        this.getVideoInfo(id);
    },
    mounted() {},
    methods: {
        // 会员之窗
        async getVideoInfo(id) {
            const res = await this.$store.dispatch("access/getVideoInfo", {
                id: id,
            });
            this.videoData = res;
            this.playerOptions = {
                live: true,
                playbackRates: [0.7, 1.0, 1.5, 2.0, 10], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: this.prefixUrl + this.videoData.coverVideoUrl, //url地址
                    },
                ],
                poster: this.prefixUrl + res.coverImageUrl, //你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true, //全屏按钮
                },
            };
            console.log(res);
        },
    },
};
</script>

<style scoped>
@import "./details.css";
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
    height: auto !important;
}
</style>
